<script setup lang="ts">
import { reactive } from "vue"
import { addRisk } from "../../api/Risk"
import router from "../../router"
import { ElMessage } from "element-plus"

const params = reactive({
  coding: "",
  unit: "",
  work_task: "",
  workflow: "",
  group_member: "",
  step_details: [
    {
      order: 1,
      step_desc: "",
      step_harm: "",
      step_be_hurt: "",
      step_measure: "",
      step_control_person: ""
    }
  ]
})

const addStep = function() {
  params.step_details.push({
    order: "",
    step_desc: "",
    step_harm: "",
    step_be_hurt: "",
    step_measure: "",
    step_control_person: ""
  })
}
const saveRisk = async function() {
  const apiParams = JSON.parse(JSON.stringify(params))
  apiParams.step_details = JSON.stringify(params.step_details)
  await addRisk(apiParams)
  ElMessage.success("保存成功")
  await router.push("/Risk")
}
const returnRisk = function() {
  router.push("/Risk")
}
</script>

<template>
  <div class="addRisk">
    <el-card style="width: 90%; height: 90%; overflow: auto">
      <div class="title">工作安全分析表</div>
      <div class="flex">
        编码:
        <el-input v-model="params.coding" style="width: 300px"></el-input>
      </div>
      <table>
        <thead>
        <tr class="h-20">
          <td class="text-center w-1/6">单位</td>
          <td class="w-1/4">
            <el-input v-model="params.unit" style="width: 100%"></el-input>
          </td>
          <td class="text-center w-1/6">工作任务</td>
          <td colspan="3">
            <el-input v-model="params.work_task" style="width: 100%"></el-input>
          </td>
        </tr>
        <tr class="h-20">
          <td class="text-center w-1/6">工作流程</td>
          <td colspan="5">
            <el-input v-model="params.workflow" style="width: 100%"></el-input>
          </td>
        </tr>
        <tr class="h-20">
          <td class="text-center w-1/6">JSA小组成员</td>
          <td colspan="5">
            <el-input v-model="params.group_member" style="width: 100%"></el-input>
          </td>
        </tr>
        </thead>
      </table>
      <table class="step-details">
        <tbody>
        <tr class="h-20">
          <td class="text-center">序号</td>
          <td class="text-center">工作步骤描述</td>
          <td class="text-center">危害（可能发生的事故）</td>
          <td class="text-center">可能伤及的人或物</td>
          <td class="text-center">控制措施、补救措施</td>
          <td class="text-center">措施控制人</td>
          <td class="text-center">操作</td>
        </tr>
        <tr v-for="(value, index) in params.step_details" :key="index" class="h-20">
          <td class="text-center w-1/12">
            <el-input v-model="value.order"></el-input>
          </td>
          <td>
            <el-input v-model="value.step_desc"></el-input>
          </td>
          <td>
            <el-input v-model="value.step_harm"></el-input>
          </td>
          <td>
            <el-input v-model="value.step_be_hurt"></el-input>
          </td>
          <td>
            <el-input v-model="value.step_measure" type="textarea"></el-input>
          </td>
          <td>
            <el-input v-model="value.step_control_person"></el-input>
          </td>
          <td>
            <el-button
              type="danger"
              class="w-full"
              :disabled="index == 0"
              @click="params.step_details.splice(index, 1)"
            >
              删除
            </el-button>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="flex justify-center">
        <el-button type="primary" @click="addStep">+</el-button>
      </div>
    </el-card>
    <div>
      <el-button type="primary" @click="returnRisk">返回</el-button>
      <el-button type="primary" @click="saveRisk">保存</el-button>
    </div>
  </div>
</template>

<style scoped>
.addRisk {
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.addRisk .title {
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  font-family: "新宋体";
  text-align: center;
}

table {
  width: 100%;
  height: 100%;
  font-size: 1vw;
}

table,
table td,
table th {
  border: 1px solid #000000;
}

:deep(.el-input) {
  font-size: 1vw;
}

.step-details :deep(.el-input .el-input__inner) {
  text-align: center;
}

:deep(.el-input .el-input__wrapper) {
  background: none;
  box-shadow: none;
}
</style>
